<!-- 文章详情页弹窗 -->
<template class='artical-detail-main'>
  <el-dialog title="提示" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
    <el-card shadow="never">
      <div slot="header">
        <span>文章添加/编辑页</span>
      </div>
      <el-form ref="form" :model="articalDetail" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="文章标题">
              <el-input v-model="articalDetail.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作者">
              <el-input v-model="articalDetail.author"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="摘要">
              <el-input v-model="articalDetail.content1" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="封面图片">
              <el-upload
                class="upload-demo"
                action="/api/leju/admin/material/uploadAndSaveImg"
                :on-success="handlesucc"
              >
                <el-button size="small" type="primary">选择图片</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-image style="width: 60px; height: 60px" :src="articalDetail.coverImg"></el-image>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <Tinymce
              upload-url="/api/leju/admin/material/uploadImg"
              v-model="articalDetail.content2"
            />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align:right;margin-top:10px">
            <el-button size="small" @click="handleClose">取 消</el-button>
            <el-button size="small" type="primary" @click="doSave">确 定</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </el-dialog>
</template>

<script>
import articalApi from "@/api/matter/artical";
import Tinymce from "@/components/Tinymce";
export default {
  components: {
    Tinymce,
  },
  data() {
    return {
      dialogVisible: false,
      articalDetail: {},
    };
  },
  created() {},
  methods: {
    //关闭弹窗
    handleClose() {
      this.dialogVisible = false;
      this.articalDetail = {};
    },

    openDialog() {
      this.dialogVisible = true;
    },

    openDialogDetail(id) {
      this.openDialog();
      articalApi.articalDetail({ id }).then((res) => {
        this.articalDetail = res.data;
      });
    },
    handlesucc(response) {
      this.articalDetail.coverImg = response.ossUrl;
    },
    doSave() {
      articalApi
        .articalSaveOrUpdate({
          ...this.articalDetail,
        })
        .then((res) => {
          if (res.code == "error") {
            this.$message.error("保存失败");
          } else {
            this.$message.success("保存成功");
          }
          this.handleClose();
          this.$emit("refrshList");
        });
    },
  },
};
</script>
<style lang='scss' scoped>
</style>